<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
    <style>
        .comp-a,
        .comp-b,
        .comp-c,
        .comp-d{
            padding: 10px;
            border: 1px dashed #333;
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <lw-a></lw-a>
        <lw-b></lw-b>
        <lw-c></lw-c>
    </div>
</body>
<script>

   

    var { createApp } = Vue;

    let lwA = {
        template: `<div class="comp-a">
            <h2>我是A组件</h2>
            <p>a:{{a}}</p>
            <p>doubleA:{{doubleA}}</p>
            <p>
                <button @click="addA">a++</button>
                <button @click="reduceA">a--</button>
            </p>
        </div>`,
        data(){
            return {
                a:1
            }
        },
        computed: {
            doubleA(){
                return this.a * 2;
            }  
        },
        methods:{
            addA(){
                this.a++
            },
            reduceA(){
                this.a--
            }
        },
    }

    let lwB = {
        template: `<div class="comp-a">
            <h2>我是B组件</h2>
            <p>a:{{a}}</p>
            <p>doubleA:{{doubleA}}</p>
            <p>
                <button @click="addA">a++</button>
                <button @click="reduceA">a--</button>
            </p>
        </div>`,
        data(){
            return {
                a:1
            }
        },
        computed: {
            doubleA(){
                return this.a * 2;
            }  
        },
        methods:{
            addA(){
                this.a++
            },
            reduceA(){
                this.a--
            }
        },
    }

    let lwC = {
        template: `<div class="comp-a">
            <h2>我是C组件</h2>
            <p>a:{{a}}</p>
            <p>doubleA:{{doubleA}}</p>
            <p>
                <button @click="addA">a++</button>
                <button @click="reduceA">a--</button>
            </p>
        </div>`,
        data(){
            return {
                a:1
            }
        },
        computed: {
            doubleA(){
                return this.a * 2;
            }  
        },
        methods:{
            addA(){
                this.a++
            },
            reduceA(){
                this.a--
            }
        },
    }

    var app = createApp({
        data() {
            return {
                count: 1,
                showColor: "red",
            }
        },
        components: {
            lwA,
            lwB,
            lwC,
        }
    })

   

    app.mount("#app");



</script>

</html>